<!--
 * Vue 3 媒体查询使用示例
 * 展示多种响应式设计方法
-->

<template>
	<div class="login-container">
		<el-card class="login-card" :class="{ 'mobile-card': isMobile }">
			<template #header>
				<div class="login-header">
					<h2>{{ isMobile ? '登录' : '微信小程序管理系统' }}</h2>
					<p v-if="!isMobile">请登录您的账户</p>
					<el-tag :type="screenSizeType" size="small" class="screen-info">
						{{ screenSizeText }} ({{ screenWidth }}px)
					</el-tag>
				</div>
			</template>

			<el-form
				ref="loginFormRef"
				:model="loginForm"
				:rules="loginRules"
				label-width="0"
				:size="isMobile ? 'default' : 'large'"
			>
				<el-form-item prop="username">
					<el-input
						v-model="loginForm.username"
						placeholder="请输入用户名"
						prefix-icon="User"
						clearable
					/>
				</el-form-item>

				<el-form-item prop="password">
					<el-input
						v-model="loginForm.password"
						type="password"
						placeholder="请输入密码"
						prefix-icon="Lock"
						show-password
						clearable
						@keyup.enter="handleLogin"
					/>
				</el-form-item>

				<el-form-item>
					<el-checkbox v-model="loginForm.remember"> 记住我 </el-checkbox>
					<el-link
						type="primary"
						style="float: right"
						@click="$router.push('/forgot-password')"
					>
						忘记密码？
					</el-link>
				</el-form-item>

				<el-form-item>
					<el-button
						type="primary"
						:size="isMobile ? 'default' : 'large'"
						style="width: 100%"
						:loading="loading"
						@click="handleLogin"
					>
						登录
					</el-button>
				</el-form-item>

				<!-- 响应式按钮组 -->
				<el-form-item>
					<div class="action-buttons">
						<el-button
							v-if="!isMobile"
							@click="quickLogin('admin')"
							:size="buttonSize"
						>
							管理员登录
						</el-button>
						<el-button @click="quickLogin('user')" :size="buttonSize">
							{{ isMobile ? '用户' : '普通用户登录' }}
						</el-button>
					</div>
				</el-form-item>
			</el-form>

			<!-- 响应式信息展示 -->
			<el-divider>设备信息</el-divider>
			<div class="device-info">
				<p><strong>屏幕宽度:</strong> {{ screenWidth }}px</p>
				<p><strong>设备类型:</strong> {{ deviceType }}</p>
				<p><strong>方向:</strong> {{ orientation }}</p>
				<p><strong>是否移动设备:</strong> {{ isMobile ? '是' : '否' }}</p>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

const router = useRouter()

// 响应式数据
const screenWidth = ref(window.innerWidth)
const screenHeight = ref(window.innerHeight)
const loading = ref(false)

// 表单引用和数据
const loginFormRef = ref<FormInstance>()
const loginForm = reactive({
	username: '',
	password: '',
	remember: false,
})

// 表单验证规则
const loginRules: FormRules = {
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{
			min: 3,
			max: 20,
			message: '用户名长度在 3 到 20 个字符',
			trigger: 'blur',
		},
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
	],
}

// 计算属性 - 响应式判断
const isMobile = computed(() => screenWidth.value < 768)
const isTablet = computed(
	() => screenWidth.value >= 768 && screenWidth.value < 1024
)
const isDesktop = computed(() => screenWidth.value >= 1024)

const deviceType = computed(() => {
	if (isMobile.value) return '手机'
	if (isTablet.value) return '平板'
	return '桌面'
})

const orientation = computed(() => {
	return screenWidth.value > screenHeight.value ? '横屏' : '竖屏'
})

const screenSizeText = computed(() => {
	if (screenWidth.value < 480) return '小屏手机'
	if (screenWidth.value < 768) return '大屏手机'
	if (screenWidth.value < 1024) return '平板'
	if (screenWidth.value < 1200) return '小屏桌面'
	return '大屏桌面'
})

const screenSizeType = computed(() => {
	if (screenWidth.value < 480) return 'danger'
	if (screenWidth.value < 768) return 'warning'
	if (screenWidth.value < 1024) return 'info'
	return 'success'
})

const buttonSize = computed(() => {
	if (isMobile.value) return 'small'
	if (isTablet.value) return 'default'
	return 'large'
})

// 监听窗口大小变化
const handleResize = () => {
	screenWidth.value = window.innerWidth
	screenHeight.value = window.innerHeight
}

// 登录处理
const handleLogin = async () => {
	if (!loginFormRef.value) return

	try {
		await loginFormRef.value.validate()
		loading.value = true

		// 模拟登录
		await new Promise((resolve) => setTimeout(resolve, 1000))

		ElMessage.success('登录成功！')
		router.push('/')
	} catch (error) {
		ElMessage.error('登录失败，请检查用户名和密码')
	} finally {
		loading.value = false
	}
}

// 快速登录
const quickLogin = (type: 'admin' | 'user') => {
	if (type === 'admin') {
		loginForm.username = 'admin'
		loginForm.password = '123456'
	} else {
		loginForm.username = 'user'
		loginForm.password = '123456'
	}
	handleLogin()
}

// 生命周期
onMounted(() => {
	window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
	window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
/* 基础样式 */
.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20px;
}

.login-card {
	width: 450px;
	max-width: 100%;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	transition: all 0.3s ease;
}

.login-header {
	text-align: center;
	margin-bottom: 20px;
}

.login-header h2 {
	margin: 0 0 8px 0;
	color: #303133;
	font-size: 24px;
	transition: font-size 0.3s ease;
}

.login-header p {
	margin: 0 0 10px 0;
	color: #909399;
	font-size: 14px;
}

.screen-info {
	margin-top: 10px;
}

.action-buttons {
	display: flex;
	gap: 10px;
	width: 100%;
}

.action-buttons .el-button {
	flex: 1;
}

.device-info {
	font-size: 12px;
	color: #666;
	background: #f5f7fa;
	padding: 10px;
	border-radius: 6px;
}

.device-info p {
	margin: 5px 0;
}

:deep(.el-card__header) {
	padding: 30px 30px 0 30px;
}

:deep(.el-card__body) {
	padding: 20px 30px 30px 30px;
}

/* 媒体查询 - 大屏桌面 (1200px+) */
@media (min-width: 1200px) {
	.login-card {
		width: 500px;
	}

	.login-header h2 {
		font-size: 28px;
	}

	:deep(.el-card__header) {
		padding: 40px 40px 0 40px;
	}

	:deep(.el-card__body) {
		padding: 25px 40px 35px 40px;
	}

	:deep(.el-input__inner) {
		height: 48px;
		font-size: 16px;
	}

	:deep(.el-button--large) {
		height: 48px;
		font-size: 16px;
	}
}

/* 媒体查询 - 平板设备 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.login-container {
		padding: 15px;
	}

	.login-card {
		width: 400px;
	}

	.login-header h2 {
		font-size: 22px;
	}

	:deep(.el-card__header) {
		padding: 25px 25px 0 25px;
	}

	:deep(.el-card__body) {
		padding: 18px 25px 25px 25px;
	}

	.action-buttons {
		flex-direction: column;
		gap: 8px;
	}
}

/* 媒体查询 - 大屏手机 (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
	.login-container {
		padding: 10px;
		align-items: flex-start;
		padding-top: 50px;
	}

	.login-card {
		width: 100%;
		max-width: 400px;
		border-radius: 10px;
	}

	.login-header h2 {
		font-size: 20px;
	}

	:deep(.el-card__header) {
		padding: 20px 20px 0 20px;
	}

	:deep(.el-card__body) {
		padding: 15px 20px 20px 20px;
	}

	.action-buttons {
		flex-direction: column;
		gap: 8px;
	}

	:deep(.el-input__inner) {
		height: 42px;
	}

	:deep(.el-button) {
		height: 42px;
	}
}

/* 媒体查询 - 小屏手机 (最大 479px) */
@media (max-width: 479px) {
	.login-container {
		padding: 5px;
		align-items: flex-start;
		padding-top: 30px;
	}

	.login-card {
		width: 100%;
		margin: 0;
		border-radius: 8px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	}

	.mobile-card {
		transform: scale(0.95);
	}

	.login-header h2 {
		font-size: 18px;
	}

	.login-header p {
		font-size: 12px;
	}

	:deep(.el-card__header) {
		padding: 15px 15px 0 15px;
	}

	:deep(.el-card__body) {
		padding: 10px 15px 15px 15px;
	}

	.action-buttons {
		flex-direction: column;
		gap: 6px;
	}

	.action-buttons .el-button {
		height: 38px;
		font-size: 14px;
	}

	:deep(.el-input__inner) {
		height: 38px;
		font-size: 14px;
	}

	:deep(.el-form-item) {
		margin-bottom: 16px;
	}

	.device-info {
		font-size: 11px;
		padding: 8px;
	}
}

/* 媒体查询 - 横屏模式 */
@media (orientation: landscape) and (max-height: 600px) {
	.login-container {
		align-items: flex-start;
		padding-top: 20px;
	}

	.login-card {
		max-height: 90vh;
		overflow-y: auto;
	}

	:deep(.el-card__header) {
		padding: 15px 30px 0 30px;
	}

	:deep(.el-card__body) {
		padding: 10px 30px 20px 30px;
	}
}

/* 媒体查询 - 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.login-card {
		box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
	}
}

/* 媒体查询 - 打印样式 */
@media print {
	.login-container {
		background: white;
		padding: 0;
	}

	.login-card {
		box-shadow: none;
		border: 1px solid #ddd;
	}

	.action-buttons,
	.device-info {
		display: none;
	}
}

/* 媒体查询 - 暗色主题偏好 */
@media (prefers-color-scheme: dark) {
	.login-container {
		background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
	}

	.login-card {
		background-color: #2d3748;
		color: #e2e8f0;
	}

	.login-header h2 {
		color: #e2e8f0;
	}

	.login-header p {
		color: #a0aec0;
	}

	.device-info {
		background: #4a5568;
		color: #e2e8f0;
	}
}

/* 媒体查询 - 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
	.login-card,
	.login-header h2,
	* {
		transition: none !important;
		animation: none !important;
	}
}
</style>
